<template>

  <div class="font-14px box-sizing bg-img-kj" style="height: calc(100vh - 60px) ; padding-top: 10px ;" >
    <v2-main>
      <el-container>
        <el-aside width="200px" class="bg-f" style="height: calc(100vh - 90px);overflow: auto">
          <div class="aside-title"></div>
          <div class="el-menu-item" @click="updateType(0)">
            <i class="el-icon-folder-add"></i>
            <span>新建日志类型</span>
          </div>
          <el-menu :default-active="activeIndex" >
            <el-menu-item class="sider-nav-item list-item"
                          :index="index + '' "
                          v-for="(item , index) in clsIfyList"  @click="open(index)">
              <span>{{item.clsifyName}}</span>
              <i class="el-icon-more font-20px" @click="updateType(1,index)"></i>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container style="height: calc(100vh - 90px);overflow: auto">
          <el-main style="padding: 0 ;" >
            <v2-header :height="44" class="bg-f">
              <template #right>
                <div style="width:300px">
                  <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" size="mini">
                    <template #append>
                      <el-button  icon="el-icon-search" @click="search(keyword)" ></el-button>
                    </template>
                  </el-input>

                </div>
                <el-button size="mini"  type="success" class="mar-rl-10px c-btn" @click.stop="updateRecord(0)" >添加</el-button>
              </template>
            </v2-header>
            <!--  note_classify 笔记的分类 -->
            <div class="pd-10px" >
              <el-row>
                <el-col :span="12" :offset="6">
                  <el-collapse accordion v-if="records.length > 0">
                    <el-collapse-item class="font-console" v-for="(item , index) in records">
                      <div slot="title" class="clearfix w-full pd-rl-10px">
                        <span>{{ item.title }}</span>
                        <div style="float: right; padding: 3px 0" >
                          <span class="pd-rl-10px">{{item.createTime}}</span>
                          <span class="pd-rl-10px" @click.stop="updateRecord(1,index )"><i class="el-icon-edit-outline"></i></span>
                        </div>
                      </div>
                      <pre class="col-f pd-10px font-console world-status" style="background-color: #2b2b2b">{{item.content}}</pre>
                    </el-collapse-item>
                  </el-collapse>
                  <el-empty description="日志为空，赶紧记录生活吧" v-if="records.length === 0">
                    <el-button size="small" @click.stop="updateRecord(0)">记录生活</el-button>
                  </el-empty>
                </el-col>
              </el-row>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </v2-main>

    <dialogForm :rows="clsIfyFormData" :show.sync="clsIfyShow" @submit="clsIfySubmit" pos="top" :title="typeTitle" :currData="currClsIfy"></dialogForm>
    <dialogForm :rows="recordsForData" :show.sync="recordShow" @submit="recordSubmit" pos="top" :title="courseTitle" :curr-data="currRecord"></dialogForm>
  </div>

</template>
<script>
import dialogForm from "@/components/v2-form/dialogForm";
import Constants from '@/Constants'
import v2Main from "@/components/v2-cps/v2-main";
import v2Header from "@/components/v2-cps/v2-header";
import clsify from "@/api/learn/clsify"
import record from "api/learn/record" ;
import ApiResponse from "utils/ApiResponse";
import util from "utils/util";
export default {
  name: 'index',
  components:{
    v2Main ,
    dialogForm,
    v2Header
  } ,
  data(){
    return {
      currentIndex: 0,
      typeTitle: '' ,
      courseTitle: '' ,
      clsIfyList:[],
      records:[],
      courseTypeTotal: 0,
      activeIndex: "0" ,
      keyword: '' ,
      clsIfyFormData: [
        {
          field: 'clsifyName' ,
          label: "分类名称",
          required: true
        },
        {
          field: 'sort' ,
          label: "排序",
          required: true,
          type: 'number'
        },
        {
          field: 'desc' ,
          label: "描述",
          type: 'textarea'
        },
        {
          field: 'id',
          type: 'hidden'
        }
      ],
      clsIfyShow: false ,
      recordShow: false ,
      currClsIfy: {} ,
      currRecord: {} ,
      courseState: 0 ,
      currentPage: 1 ,
      pageSize: 15 ,
      params:{clsifyName: ''},
    }
  },
  created(){
    this.getClsIfy() ;
  },
  methods:{
    getClsIfy(){
      clsify.getList(1, 100,{}).then(res=>{
        let response = new ApiResponse(res);
        response.ok((data)=>{
          this.clsIfyList = data.records;
          this.currentIndex = 0 ;
          this.search()
        })
      })
    },
    getRecord(){
      record.getList(this.currentPage , this.pageSize , this.params).then(res=>{
        let response = new ApiResponse(res);
        response.ok((data)=>{
          this.records = data.records;
        })
      })
    } ,
    updateRecord(state , index){
      this.recordShow = true ;
      this.courseTitle = state === 0 ? '添加日志': "更新日志" ;
      this.currRecord = state === 0 ? {
        clsifyId : this.clsIfyList[this.currentIndex] ? this.clsIfyList[this.currentIndex].id : ''
      } : this.records[index] ;
    },

    open(index){
      this.currentIndex = index
    },
    search(val){
      let clsIfy = this.getActiveClsIfy() ;
      if(!util.isEmpty(clsIfy)){
        this.params.clsifyName = val ;
        this.params.clsifyId = clsIfy.id ;
        this.getRecord() ;
      }
    },
    clsIfySubmit(data){
      clsify.update(data).then(res=>{
        let response = new ApiResponse(res) ;
        response.ok((data)=>{
          this.getClsIfy() ;
          this.clsIfyShow = false ;
        }).print()
      })

    },
    recordSubmit(data){
      record.update(data).then(res=>{
        let response = new ApiResponse(res);
        response.ok(()=>{
          this.getRecord() ;
          this.recordDialogChang() ;
        }).print()
      })
    },
    updateType(state , index){
      this.typeTitle = state === 0 ? "新建分类":'更新分类';
      this.clsIfyShow = true ;
      this.currClsIfy = state === 0 ? {} : this.clsIfyList[index] ;
    },
    recordDialogChang(){
      this.recordShow = !this.recordShow ;
    },
    getActiveClsIfy(){
      return this.clsIfyList[this.currentIndex]
    }
  },
  computed:{
    recordsForData(){
      return [
        {
          field: 'clsifyId' ,
          label: '日志类型',
          required: true ,
          opts: this.clsIfyList,
          type:"select" ,
          map:{
            label: 'clsifyName' ,
            value: "id"
          }
        },
        {
          field: 'title' ,
          label: '日志标题',
          required: true ,
        },
        {
          field: 'sort' ,
          label: '排序',
          required: true ,
          type:"number"
        },
        {
          field: 'content' ,
          label: '日志内容',
          required: true ,
          type: "textarea"
        },
        {
          field: 'recordId',
          type: 'hidden'
        }
      ]
    }
  },
  watch:{
    currentIndex(val){
      this.activeIndex = val + "" ;
      if(!util.isEmpty(this.clsIfyList)){
        let clsIfy = this.clsIfyList[val] ;
        this.params = {
          clsifyId: clsIfy.id
        }
        this.getRecord()
      }
      return val ;
    }
  }
}
</script>

<style>
.cover{
  text-align: center;
  height: 119px;
}

.grid-content{
  box-shadow: 0 0 5px #00000024;
}
.el-aside{
  border-right: 1px solid #ddd;
}
.el-menu-item.is-active{
  background-color: #409eff;
  color: #fff;
}
.el-menu{border-right: none !important;}
.aside-title{
  height: 44px;
  border-bottom: 1px solid #eee;
}
.el-button--mini{
  padding: 8px 16px;
}
.el-menu-item.is-active .el-icon-more{
  color: #fff;
}
.c-btn{
  padding: 6px 16px;
  margin: 0 10px;
}
.el-collapse-item__header{
  height: 44px !important;
  line-height: 44px !important;
}
.font-console{
  font-family: "微软雅黑" , Consolas , "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
.world-status{
  word-break:break-all;
  white-space:pre-wrap;
}
</style>
